---
const response = await fetch("http://localhost:9901/api/getSkills");
const data = await response.json();

// const sortedPosts = data.sort((a, b) => new Date(b.id).valueOf() - new Date(a.id).valueOf());
---
<div class="container">
    <div class="card">
      <p class="title">专业技能</p>
      <div class="skill-list">
        {data.map(p => <li class="skill">
          { p.content }
        </li>)}
      </div>
    </div>
  </div>
  
<style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .card {
      background-color: #d9fdfb;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      padding: 20px;
      width: 60%;
      transition: transform 0.3s, box-shadow 0.3s;
      text-align: left;
    }
    
    .card:hover {
      transform: scale(1.15);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    
    .skill-list {
      margin-bottom: 20px;
    }
    
    .skill {
      margin-bottom: 10px;
    }

    li:hover {
        color: rgb(248, 69, 4);
    }
    </style>
    

    